<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Event Description Test page</title>
        <link media="all" href="css/styles.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery.js"></script>       
        <script>
            $(document).ready(ready);
            var urlstr="http://localhost:8080/CRUD-EA-war/resources/Trailer" ;
        
            /**
             * Called when the browser DOM is ready
             */
            function ready(){                            
                $("#bget").click(getData); //registers the click event for sendButton
                $("#bput").click(putData); //registers the click event for sendButton
                $("#bpost").click(postData); //registers the click event for sendButton
                $("#bdelete").click(deleteData); //registers the click event for sendButton
            }
            
             /**
             * Sends a GET request to REST webs service to the get the event description for each supplied 
             * document id.
             */
            function getData(){
                urlstr2="http://localhost:8080/CRUD-EA-war/resources/Trailer/3" ;
                                                                                
                $.ajax({
                    url: urlstr2 ,
                    type: "GET",
                    //data: JSON.stringify({id: 1 , thermo_id: 3}), 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }
            
            /**
             * Sends a PUT request to REST webs service to the get the event description for each supplied 
             * document id.
             */
            function putData(){
                                                
                var requests = {id: $("#id").val(), thermo_id: $("#thermo_id").val(), license_plate: $("#license_plate").val() , thermograph_certification:$("#thermograph_certification").val() };
                                                                                
                $.ajax({
                    url: urlstr ,
                    type: "PUT",
                    data: JSON.stringify(requests), 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }

            /**
             * Sends a POST request to REST webs service to the get the event description for each supplied 
             * document id.nada nojo
             */
            function postData(){
                var requests = {id: $("#id").val(), thermo_id: $("#thermo_id").val(), license_plate: $("#license_plate").val() , thermograph_certification:$("#thermograph_certification").val() };
                                                                                
                $.ajax({
                    url: urlstr ,
                    type: "POST",
                    data: JSON.stringify(requests), 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }
            
            
            /**
             * Sends a DELETE request to REST webs service to the get the event description for each supplied 
             * document id.
             */
            function deleteData(){
                var requests = {id: $("#id").val()};
                                
                //requests.push({_id: $("#id").val() , id_group: parseInt( $("#idGroup").val() ) , language: $("#language").val()  , timezone: $("#timezone").val()   })
                                                                                
                $.ajax({
                    url: urlstr ,
                    type: "DELETE",
                    data: JSON.stringify(requests), 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }
            
            /**
             * Receives the POST result from the REST Web Service
             * and displays the received data on the web page
             */            
            function postSucess(data, textStatus, jqXHR){
                $("#results").empty();
                
                var nrResults = parseInt($("#nrResults").val() );
                var resToShow=data.length;
                
                if(nrResults<data.length){
                    resToShow = nrResults;
                }
                
                for(var idx=0;idx<resToShow;idx++){
                    var r = data[idx];
                    $("#results").append("<p>"+ r._id + ": " + r.description  +"</p>");
                }                
            }
            
        </script>
    </head>
    <body>
        <h1 class="title">Event Description Test page</h1>
        <div  class="menu"> <a href="index.jsp">Bulk Event Description requests Test page</a> 
            <a href="testCrud.html">Event Description Test page</a>  </div>
        <div class="fields">
            <div> <div class="label" >ID:</div> <input class="field" value="5069a85ee4b02414bca74b8a" id="id"/></div>
            <div> <div class="label" >thermo_id:</div> <input class="field" type="text" value="43693" id="thermo_id"/></div>
            <div> <div class="label" >license_plate:</div> <input class="field" type="text" value="pt" id="license_plate"/></div>
            <div> <div class="label" >thermograph_certification:</div> <input class="field" type="text" value="Europe/Lisbon" id="thermograph_certification"/></div>       
            <div class="button"><input type="button" id="bget" value="Get"></div>
            <div class="button"><input type="button" id="bput" value="Put"></div>
            <div class="button"><input type="button" id="bpost" value="Post"></div>
            <div class="button"><input type="button" id="bdelete" value="Delete"></div>
        </div>  
        <p class="titleResults">Resultado</p>
        <div class="results" id="results">            
        </div>
    </body>
</html>
